

<template>
    <view>
        <!-- 内容 -->
        <view class="navbar-box" :style="{background:bgColor}">
            <view :style="{height:sysInfo.statusBarHeight+'px'}"></view>
            <view class="navbar" :style="{ height:navbarHeight+'px', padding: '0 ' + paddingLR + 'px' }">

                <u-icon v-if="leftIconType=='back'" name="arrow-left" size="44rpx" color="#212122" top="2rpx" @tap="handIcon('back')"></u-icon>
                <u-icon v-if="leftIconType=='msg'" name="/static/common/messag.png" size="44rpx" top="2rpx" @tap="handIcon('msg')"></u-icon>

                <view v-if="search.show" class="search-box" :style="{flex:1,marginLeft:searchStyle.ML+'px'}" @tap.stop="goSearch">
                    <u-search 
                        :showAction="false"
                        :height="searchStyle.height+'px'"
                        bgColor="#FFF"
                        searchIcon="/static/common/search.png"
                        searchIconSize="54rpx"
                        placeholder="搜索标题、类型" 
                        placeholderColor="#77D9FF"
                        v-model="searchStyle.keyword"
                        :inputStyle="{fontSize:'30rpx'}"
                        :clearabled="true"
                        :disabled="search.disabled"
                        @search="searchEvent">
                    </u-search>
                </view>
                <view v-if="title" class="u-line-1 com-font-34" 
                    :style="{flex:1,marginLeft:searchStyle.ML+'px'}">
                    {{title}}
                </view>

                <!-- #ifdef MP-WEIXIN -->
                <view :style="{
                    width: sysInfo.capsule.width+'px', 
                    height: sysInfo.capsule.height+'px', 
                    marginLeft: sysInfo.capsule.navBarLRGap + 'px' }">
                </view>
                <!-- #endif -->
            </view>
        </view>
        
        <!-- 安全距离,防止顶部塌陷 -->
        <u-gap :height="sysInfo.statusBarHeight + topSecurityDistance + 'px'" bgColor="transparent"></u-gap>

        <!-- 背景图片 -->
        <image class="bg" src="/static/common/navbar-search-bg.png" alt=""></image>
    </view>
</template>


<script>
export default {
    name: "navbarSearch",
    components: {},
    props: {
        bgColor: { type: String, default: "linear-gradient(to right, #F5F3FD ,#F3F7FD,#EEFDFE,#EEFDFE)" },
        leftIconType: { type: String, default: "" },
        search: { 
            type: Object, 
            default:()=>{
                return {
                    show: false,
                    disabled: false,
                    placeholder: "",
                }
            }
        },
        title: { type: String, default: "" },
    },

    data() {
        return {
            sysInfo: this.mixinGetSysInfo(),
            navbarHeight: 44, // 导航栏高度
            paddingLR: 16, // navbar左右内边距
            searchStyle: {
                height: 32, // 搜索框高度
                ML: 16, // 搜索框左右间距
                keyword: "", // 搜索的关键字
            },
            topSecurityDistance: 44, // 顶部安全距离
        };
    },

    computed: {},
    watch: {},

    mounted() {
        const sysInfo = this.sysInfo;
        console.log("设备信息",sysInfo);
        // #ifdef MP-WEIXIN
        this.navbarHeight = sysInfo.capsule.navBarH;
        this.paddingLR = sysInfo.capsule.navBarLRGap;
        this.searchStyle.height = sysInfo.capsule.height; 
        this.searchStyle.ML = sysInfo.capsule.navBarLRGap;
        this.topSecurityDistance = sysInfo.capsule.navBarH;
        // #endif
    },

    methods: {
        // 左侧按钮点击事件
        handIcon(type){
            if(type=="back"){
                const pages = getCurrentPages();
                if(pages.length == 1){
                    uni.switchTab({
                        url: "/pages/tabbar/home"
                    })
                }else{
                    uni.navigateBack();
                }
            }
            if(type=="msg"){
                this.$emit("goNews");
            }
        },
        // 去搜索
        goSearch(){
            if(this.search.disabled){
                this.$emit("goSearch");
            }
        },
        // 搜索
        searchEvent(){
            this.$emit("search",{keyword:this.searchStyle.keyword})
        }
    }
}
</script>


<style scoped lang='scss'>
    .navbar-box{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        // background-image: linear-gradient(45deg, #F8F8F8, rgb(227, 252, 255));
        // background-image: linear-gradient(to right, #F5F3FD ,#F3F7FD,#EEFDFE,#EEFDFE);
    }
    .navbar{
        display: flex;
        align-items: center;
        .search-box{
            background: linear-gradient(0deg, #C3B0FF, #75EAFF);
            padding: 2rpx;
            border-radius: 68rpx;
            display: flex;
            align-items: center;
        }
    }
    .bg{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
    }
</style>